$(function () {

    //渲染中心轮播图
    var ban_str = ""
    for (var b = 0; b < content_ban.length; b++) {
        ban_str += '<a href="javascript:;">'
        ban_str += '<div class="title">'
        ban_str += '<div class="date"><span>' + content_ban[b].day + '</span>' + content_ban[b].year_mth + '</div>'
        ban_str += '<h3>' + content_ban[b].info + '</h3>'
        ban_str += '</div>'
        ban_str += '</a>'
    }
    $(".banner").append(ban_str)

    //渲染轮播图下方导航栏
    var sales_str = ""
    for (var s = 0; s < sales.length; s++) {
        sales_str += '<a href="javascript:;">'
        sales_str += '<h4>' + sales[s].title + '</h4>'
        sales_str += '<p>' + sales[s].info + '</p>'
        sales_str += '<i></i>'
        sales_str += '</a>'
    }
    $(".sales-entrys-container-innerimg").append(sales_str)

    //渲染轮播图下方导航栏机票模块输入框隐藏的地点盒子部分内容
    //出发城市隐藏盒子
    var place_str = ""
    for (var p = 0; p < place_data.length; p++) {
        place_str += "<li class='place-item li-start'>" + place_data[p] + "</li>"
    }
    $(".flight-start .place-id").append(place_str)

    //到达城市隐藏盒子
    var place_str = ""
    for (var p = 0; p < place_data.length; p++) {
        place_str += "<li class='place-item li-end'>" + place_data[p] + "</li>"
    }
    $(".flight-end .place-id").append(place_str)

    // 渲染小轮播图
    // var str = ""
    // for (var k = 0; k < lit_ban.length; k++) {
    //     str += '<li>';
    //     str += '<img src="' + lit_ban[k].image + '" alt="">';
    //     str += '<h3>' + lit_ban[k].title + '</h3>';
    //     str += '<p>' + lit_ban[k].info + '</p>';
    //     str += '</li>';
    // }
    // $("#traveller-ban").append(str)

    // 大轮播图
    var index = 0,
        banner
    // 初始化样式
    $(".banner>a").eq(index).css("opacity", "1")
    $(".banner-list>li").eq(index).css("border-color", "#ff9d00")

    // 封装轮播图定时器函数
    function start() {
        banner = setInterval(() => {
            index++
            index = index == 5 ? 0 : index
            $(".banner>a").css("opacity", "0").eq(index).css("opacity", "1")
            $(".banner-list>li").css("border-color", "transparent").eq(index).css("border-color", "#ff9d00")
        }, 3000);
    }

    // 鼠标点击轮播图导航图事件
    $(".banner-list").on("click", "li", function () {
        clearInterval(banner)
        index = $(this).index()
        $(".banner>a").css("opacity", "0").eq(index).css("opacity", "1")
        $(".banner-list>li").css("border-color", "transparent").eq(index).css("border-color", "#ff9d00")
        start()
    })

    // 鼠标移入轮播图停止计时器及导航图控制轮播图事件
    $(".banner>a").mouseover(function () {
        clearInterval(banner)
    })
    $(".banner-list").on("mouseover", "li", function () {
        if ($(this).css("border-color") === "rgb(255, 157, 0)") {
            clearInterval(banner)
        }
    })
    $(".banner>a,.banner-list>li").mouseout(function () {
        clearInterval(banner)
        start()
    })

    // 轮播图搜索栏
    $(".search-group>ul>li>i").eq(0).css("background-position-y", "-140px")
    $(".search-item").hide()
    $(".search-item").eq(0).show()
    $(".search-group>ul").on("click", "li", function () {
        var index = $(this).index()
        $(".search-item").hide()
        $(".search-item").eq(index).show()
        $(".search-group>ul>li>i").css("background-position-y", "-110px")
        $(this).find("i").css("background-position-y", "-140px")
    })

    // 获取日期
    var date = new Date(),
        Month = (date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : date.getMonth(),
        Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate(),
        nowTime = date.getFullYear() + "-" + Month + "-" + Day
    $(".start-date").find("input").val(nowTime)


    // 小轮播图
    var little_ban,
        little_move,
        i = 0,
        j = 0,
        LeftIndex = parseInt($(".traveller-banner").css("width").replace("px", ""))
    function little_start() {
        var left = -(i * LeftIndex)
        $("#traveller-ban").css("left", left)
        $(".ban-list").find("li").removeClass("active")
        $(".ban-list").find("li").eq(j).addClass("active")

        little_ban = setInterval(() => {
            i++
            if (i == 6) {
                i = 1
                left = 0
            }
            j++
            little_move = setInterval(() => {
                left -= 13
                if (left == -(i * LeftIndex)) {
                    clearInterval(little_move)
                }
                $("#traveller-ban").css("left", left)
            }, 20);
            j = j == 5 ? 0 : j
            $(".ban-list").find("li").removeClass("active")
            $(".ban-list").find("li").eq(j).addClass("active")
        }, 3000);
    }


    // 执行大轮播图函数
    // start()

    // 执行小轮播图函数
    little_start()

    window.onfocus = function(){
        little_start()
    }

    window.onblur = function(){
        clearInterval(little_ban)
    }


    //渲染右侧中心栏内容,封装函数
    function cenStr(n) {
        $(".right-content>.tn-list").css("opacity", "0")
        var cen_str = "",
            last_n = parseInt(n) * 10
        n = parseInt(--n) * 10
        for (var l = n; l < last_n; l++) {
            cen_str += '<div class="tn-item">';
            cen_str += '<div class="tn-img">';
            cen_str += '<img src="' + content_data[l].img + '" alt="">';
            cen_str += '</div>';
            cen_str += '<div class="tn-warpper">';
            cen_str += '<dl>';
            cen_str += '<dt>';
            cen_str += '<a href="javascript:;">' + content_data[l].title + '</a>';
            cen_str += '</dt>';
            cen_str += '<dd>';
            cen_str += '<a href="javascript:;">' + content_data[l].info + '</a>';
            cen_str += '</dd>';
            cen_str += '</dl>';
            cen_str += '<div class="tn-extra">';
            cen_str += '<span class="tn-place"><i></i><a href="">' + content_data[l].place + '</a>,by</span>';
            cen_str += '<span class="tn-user">';
            cen_str += '<a href="javascript:;"><img src="' + content_data[l].user_img + '" alt="">' + content_data[l].username + '</a>';
            cen_str += '</span>';
            cen_str += '<span class="tn-nums"><i></i>' + content_data[l].watch + '</span>';
            cen_str += '<span class="tn-ding"><span>' + content_data[l].ding + '</span><i></i></span>';
            cen_str += '</div>';
            cen_str += '</div>';
            cen_str += '</div>';
        }
        $(".right-content>.tn-list").empty()
        $(".right-content>.tn-list").append(cen_str)
        $(".right-content>.tn-list").css("opacity", "1")
    }
    cenStr(1)


    // 页数跳转显示内容
    // 一开始隐藏上一页按钮
    $("#prev").hide()
    var num = 1,
        item
    $(".page-list").on("click", ".page-num", function () {
        num = $(this).text()
        num == 1 ? $("#prev").hide() : $("#prev").show()
        $(".page-num").removeClass("active")
        $(this).addClass("active")
        cenStr(num)
        $("body,html").animate({
            scrollTop: 670
        }, 2000);
    })
    //上一页
    $("#prev").on("click", function () {
        num--
        item = num - 1
        num = num <= 1 ? 1 : num
        num == 1 ? $("#prev").hide() : $("#prev").show()
        item = item <= 0 ? 0 : item
        $(".page-num").removeClass("active")
        $(".page-num").eq(item).addClass("active")
        cenStr(num)
        $("body,html").animate({
            scrollTop: 670
        }, 2000);
    })
    //下一页    
    $("#next").on("click", function () {
        $("#prev").show()
        num++
        item = num - 1
        num = num >= 9 ? 9 : num
        item = item >= 8 ? 8 : item
        $(".page-num").removeClass("active")
        $(".page-num").eq(item).addClass("active")
        cenStr(num)
        $("body,html").animate({
            scrollTop: 670
        }, 2000);
    })

    var piece = content_data.length,
        sum = Math.ceil(content_data.length / 10)
    $("#page-sum").text(sum)
    $("#page-piece").text(piece)


    //返回顶部动画效果
    $(".btn-gotop").on("click", function () {
        $("body,html").animate({
            scrollTop: 0
        }, 1000);
    })


    // 点击右侧内容栏顶部筛选按钮显示下拉框
    //获得焦点显示下拉框
    $(".tn-nav").on("focus", "input", function () {
        $(".tn-dropdown-pop").show()
    })
    //失去焦点隐藏下拉框
    $(".tn-nav").on("blur", "input", function () {
        $(".tn-dropdown-pop").hide()
    })
    //右上角“X”按钮隐藏下拉框
    $(".tn-dropdown-pop").on("click", ".del", function () {
        $(".tn-dropdown-pop").hide()
    })

    // 右侧内容栏顶部导航按钮
    $(".tn-nav").on("click", "a", function () {
        $(".tn-nav").find("a").removeClass("active")
        $(this).addClass("active")
    })

    //轮播图下方导航栏机票模块的搜索框获得焦点时显示地点盒子
    //出发城市
    $("#flight-start").focus(function () {
        $(".flight-start").find(".place-box").show()
        $(".flight-start .place-nav-item").eq(0).addClass("active")
    })
    //到达城市
    $("#flight-end").focus(function () {
        $(".flight-end").find(".place-box").show()
        $(".flight-end .place-nav-item").eq(0).addClass("active")
    })


    //伪失去焦点隐藏地点盒子
    $("body").on("mousedown", function (e) {
        var target = e.target
        //地点选择显示在输入框内
        if (target.className === "place-item li-start") {
            $("#flight-start").val(target.innerHTML)
            $(".flight-start").find(".place-box").hide()
        } else if (target.className === "place-item li-end") {
            //地点选择显示在输入框内
            $("#flight-end").val(target.innerHTML)
            $(".flight-end").find(".place-box").hide()
        } else if (target.className === "place-nav-item start-nav") {
            // 轮播图搜索栏机票模块地点隐藏盒子的导航栏
            $(".flight-start .place-nav-item").removeClass("active")
            $(target).addClass("active")
        } else if (target.className === "place-nav-item end-nav") {
            // 轮播图搜索栏机票模块地点隐藏盒子的导航栏
            $(".flight-end .place-nav-item").removeClass("active")
            $(target).addClass("active")
        } else if ($(target).attr("id") !== "history" && $(target).attr("id") !== "history-list" && target.className !== "place-nav-item") {
            //伪失去焦点隐藏地点盒子
            $(".flight-start").find(".place-box").hide()
            $(".flight-end").find(".place-box").hide()
        }
    })

    // 地点切换
    $(".search-input-exchange").click(function () {
        var a = $("#flight-start").val()
        $("#flight-start").val($("#flight-end").val())
        $("#flight-end").val(a)
    })


    // 头部搜索框拉伸效果
    // 获得焦点
    $(".head-search>input").focus(function () {
        $(this).next().css({
            backgroundPositionY: "-140px",
        })
        $(this).parent().css({
            left: "574px"
        })
        $(this).css({
            width: "382px",
        })
    })
    // 失去焦点
    $(".head-search>input").blur(function () {
        $(this).next().css({
            backgroundPositionY: "-110px"
        })
        $(this).css({
            width: "110px",
        })
        $(this).parent().css({
            left: "846px"
        })
    })

})